<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '好吃好喝',
  },
}
</route>

<script lang="ts" setup>
// 获取屏幕边界到安全区域距离
let safeAreaInsets
let systemInfo

// #ifdef MP-WEIXIN
// 微信小程序使用新的API
systemInfo = uni.getWindowInfo()
safeAreaInsets = systemInfo.safeArea
  ? {
      top: systemInfo.safeArea.top,
      right: systemInfo.windowWidth - systemInfo.safeArea.right,
      bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
      left: systemInfo.safeArea.left,
    }
  : null
// #endif

// #ifndef MP-WEIXIN
// 其他平台继续使用uni API
systemInfo = uni.getSystemInfoSync()
safeAreaInsets = systemInfo.safeAreaInsets
// #endif

function back() {
  uni.navigateBack()
}

const shopList = ref([
  {
    id: 1,
    name: 'XXX甜品',
    img: 'https://m.360buyimg.com/i/jfs/t1/294458/2/15231/89382/68734295F97c4c526/b4c9e3c0e5d29198.png',
    label: ['咖啡轻餐'],
  },
  {
    id: 2,
    name: '北野家',
    img: 'https://m.360buyimg.com/i/jfs/t1/294458/2/15231/89382/68734295F97c4c526/b4c9e3c0e5d29198.png',
  },
  {
    id: 3,
    name: 'XXX炸鸡',
    img: 'https://m.360buyimg.com/i/jfs/t1/294458/2/15231/89382/68734295F97c4c526/b4c9e3c0e5d29198.png',
    label: ['无肉不欢', '轻食快餐'],
  },
  {
    id: 4,
    name: 'XXX烤肉',
    img: 'https://m.360buyimg.com/i/jfs/t1/294458/2/15231/89382/68734295F97c4c526/b4c9e3c0e5d29198.png',
  },
  {
    id: 5,
    name: 'XXX拌饭',
    img: 'https://m.360buyimg.com/i/jfs/t1/294458/2/15231/89382/68734295F97c4c526/b4c9e3c0e5d29198.png',
  },
  {
    id: 6,
    name: 'XX热煮',
    img: 'https://m.360buyimg.com/i/jfs/t1/294458/2/15231/89382/68734295F97c4c526/b4c9e3c0e5d29198.png',
  },
  {
    id: 7,
    name: 'XX面馆',
    img: 'https://m.360buyimg.com/i/jfs/t1/294458/2/15231/89382/68734295F97c4c526/b4c9e3c0e5d29198.png',
  },
])

// 店铺点击事件
function shopClick(item) {
  const url = '/pages/delicious/shopDetail'
  const name = item.name

  uni.navigateTo({
    url: `/pages/delicious/shopDetail?id=${name}`,
    success: (res) => {
      res.eventChannel.emit('acceptDataFromOpenerPage', { item })
    },
  })
}
</script>

<template>
  <view>
    <!-- 导航栏 -->
    <view class="fixed top-0 z-20 w-full bg-white transition-all duration-300">
      <view class="bg-white" :style="{ height: `${safeAreaInsets?.top}px` }" />
      <view class="h-11 flex items-center bg-white px-4">
        <wd-icon name="thin-arrow-left" size="22px" @click="back" />
        <h1 class="flex-1 truncate px-6 text-lg text-gray-800 font-medium">
          油车港美食
        </h1>
      </view>
    </view>
    <!-- 间隔占位 -->
    <view class="pt-5" :style="{ marginTop: `${safeAreaInsets?.top + 20}px` }" />
    <!-- 店铺列表 -->
    <view class="flex flex-col px-4">
      <view v-for="item in shopList" :key="item.id" class="mt-5 flex" style="border-bottom: 2rpx solid #f4f4f4;" @click="shopClick(item)">
        <image class="h-26 w-35 rounded-xl" :src="item.img" mode="aspectFill" />
        <view class="ml-3">
          <!-- 店铺名称 -->
          <view class="text-lg">
            {{ item.name }}
          </view>
          <!-- 店铺标签 -->
          <view class="overflow mt-3 flex flex-wrap">
            <view
              v-for="(item2, index) in item.label"
              :key="index"
              class="mr-2 h-39rpx flex items-center justify-center rounded-md bg-[#f3e6da] px-2 text-[24rpx] text-[#c1a58e]"
            >
              {{ item2 }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
//
</style>
